<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        table, tr, td {
            border: solid 1px black;
        }
    </style>
    <script src="./js/vue.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>

<div id="application">
    <table >
        <tr >
            <td colspan="2" style="width: 600px"> <input style="width: 600px" type="text" placeholder="要记录的事项" v-model="inputValue" @keyup.enter="addItem"> </td>
        </tr>

        <tr v-for="(info,index) in infoList">
            <td v-text="(index + 1) + ' ' + info"> </td>
            <td> <span @click="deleteItem(index)"> 删除 </span> </td>
        </tr>

        <tr>
            <td colspan="2" v-show="infoList.length !== 0">{{infoList.length}} 事项剩余  <span @click="clearList" style="background: lawngreen">清空</span> </td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    let vueModel = new Vue({
        el : "#application",
        data : {
            infoList : ["java", "c/c++", "linux", "python", "rust"],
            inputValue : ''
        },
        methods : {
            addItem : function () {
                this.infoList.push(this.inputValue);
            },
            deleteItem : function (index) {
                //alert(index);
                this.infoList.splice(index, 1);
            },
            clearList : function () {
                this.infoList = [];
            }
        }
    });

axios.get("requestUrlAddress?k1=v1&k2=v2&k3=v3&...").then(
  function (response) {
    // TODO 响应成功
  },
  function (err) {
      // TODO 请求异常或者其他...
  }
);

axios.post(
    "requestUrlAddress",
    {
        // 参数对象
        // K : V, ...
    }
).then(
    function (response) {
        // TODO 响应成功
    },
    function (err) {
        // TODO 请求异常或者其他...
    }
);




</script>
</body>
</html>